<template>
	<view class="page_layout">
		<view v-if="isWeiXin" class="verificate_container wave">
		</view>
		<view v-if="isWeiXin" class="scan_container wave">
		</view>
		<view v-if="isWeiXin" class="scan_btn " @click="scanByOtherHost">
			<image src="../../static/image/scan_btn.png" mode="scaleToFill"></image>
			<text>扫码核销</text>
		</view>
		<view v-else>
			请在微信中打开此页面！
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isWeiXin: false
			}
		},
		mounted() {
			this.isWeiXin = this.checkWeiXin();
			console.log('mounted')
			// 扫完页面返回获取结果，如果有就进行核销
			let qrResult = this.cacheHelper.getQrResult();
			let uid = uni.getStorageSync('uid');
			if (qrResult) 
				this.wirteOffVoucher(qrResult, uid);
		},
		methods: {
			checkWeiXin(){
			    var ua = navigator.userAgent.toLowerCase();
			    if(ua.match(/MicroMessenger/i)=="micromessenger") {
			        return true;
			    } else {
			        return true;
			    }
			},
			async configWeiXin() {
				uni.showLoading({
					mask: true,
					title: '请稍候...'
				})
				// 获取微信能力
				let res = await this.api.weiXinConfig({
					url: location.href.split("#")[0]
				});
				let { data } = res;
				console.log(data)
				if (data.status != 1) {
					uni.hideLoading();
					uni.showToast({
						title: '配置失败,当前微信环境异常'
					});
					return;
				}
				jWeixin.config({
					debug: true,//是否开启调试功能，这里关闭！
					appId: data.data.appId,//appid
					timestamp: parseInt(data.data.timestamp), //时间戳
					nonceStr: data.data.nonceStr, //生成签名的随机字符串
					signature: data.data.signature,//签名
					// appId: 'wxe1fc8d5858d7a058',
					// timestamp: 1651634319,
					// nonceStr: '88a93db2-2eac-4765-a687-f924b4b4eecf',
					// signature: '4162cda08c4a93806a81faf2ae613768036467a1',
					jsApiList: [
						"scanQRCode",
						"chooseWXPay",
						'checkJsApi',
						'getLocation',
						'wx-open-launch-weapp',
					],
					openTagList: [
						'wx-open-launch-weapp',
						]
				});
				
				// jWeixin.config({
				// 	debug: true,//是否开启调试功能，这里关闭！
				// 	appId: 'wx890cc323ed3b0200',//appid
				// 	timestamp: parseInt(1651401442), //时间戳
				// 	nonceStr: 'ZHbtW84ANKwgfAiK', //生成签名的随机字符串
				// 	signature: '33faf986585e29b976e4b612e3408fb6939f4d26',//签名
				// 	jsApiList: [
				// 		"scanQRCode",
				// 		"chooseWXPay"
				// 	],
				// });
				
				jWeixin.ready(function() {
					uni.hideLoading();
				})
				
			},
			// 微信jssdk扫一扫
			scan() {
				let self = this;
				let uid = uni.getStorageSync('uid');
				if (!uid) {
					uni.showToast({
						title: "您尚未登录~",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				jWeixin.scanQRCode({
				  needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				  scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
				  success: function (res) {
				    let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
					console.log(result)
					self.wirteOffVoucher(result, uid);
				  }
				});
		
			},
			// id: 核销券ID uid: 当前登录业务员ID
			scanByOtherHost() {
				let uid = uni.getStorageSync('uid');
				if (!uid) {
					uni.showToast({
						title: "您尚未登录~",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				location.href = `http://996315.com/api/scan/?redirect_uri=${location.href.split('#')[0].split('?')[0]}`;
			},
			// 核销核销券
			async wirteOffVoucher(id, uid) {
				uni.showLoading({
					mask: true,
					title: '请稍候...'
				})
				const  { data } =  await this.api.writeOffCoupon({userCouponId: id})
				const { code }  =data 
				let msg = '核销成功~'
				if (code === 0) 
					 msg ='核销失败'
				this.cacheHelper.clearQrResult();
				uni.hideLoading();
				uni.showToast({
					title: msg,
					icon: 'none',
					duration: 2000
				})
			}
			
		}
	}
</script>

<style>
	.page_layout {
		width: 100%;
		height: calc(100vh - 200px);
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	 @keyframes wv {
		0% {
			opacity: 1;
			transform: scale(0.8);
		}
		
		25% {
			opacity: 1;
			transform: scale(0.92);
		}

		50% {
			opacity: 1;
			transform: scale(1);
		}

		75% {
			opacity: 1;
			transform: scale(0.92);
		}

		100% {
			opacity: 1;
			transform: scale(0.8);
		}
	}
	
	.wave {
		animation-duration: 3.4s;
		animation-name: wv;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		border-radius: 50%;
		opacity: 0;
	}
	.scan_container {
		width: 180px;
		height: 180px;
		border-radius: 50%;
		background-color: #E2EDE7;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		animation-delay: 0s;
		position: absolute;
	}
	.verificate_container {
		width: 210px;
		height: 210px;
		border-radius: 50%;
		background-color: #EDF3F0;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		animation-delay: 0s;
		position: absolute;
	}
	.scan_btn {
		width: 150px;
		height: 150px;
		border-radius: 50%;
		background-color: #077840;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
	}
	image {
		width: 80px;
		height: 80px;
	}
	text {
		padding-top: 10px;
		color: white;
	}
</style>
